<template>
  <div class="container">
    <h1>新建 Request</h1>
    <form @submit.prevent="showConfirmationDialog">
      <div class="form-grid">
        <div class="form-group">
          <label for="item">Item:</label>
          <select v-model="request.Item" required class="rounded-select">
            <option value="" disabled>Select Item</option>
            <option value="Onboarding, Provisioning and Decommissioning Request">Onboarding, Provisioning and Decommissioning Request</option>
            <option value="Project Request">Project Request</option>
            <option value="Report Request">Report Request</option>
            <option value="Technical and Configuration Request">Technical and Configuration Request</option>
          </select>
        </div>
        <div class="form-group">
          <label for="priority">Priority:</label>
          <select v-model="request.Priority" required class="rounded-select">
            <option value="" disabled>Select Priority</option>
            <option value="1 - Critical">1 - Critical</option>
            <option value="2 - High">2 - High</option>
            <option value="3 - Moderate">3 - Moderate</option>
            <option value="4 - Low">4 - Low</option>
          </select>
        </div>
        <div class="form-group">
          <label for="opened">Opened:</label>
          <input type="datetime-local" v-model="request.Opened" required class="rounded-input" />
        </div>
        <div class="form-group">
          <label for="opened_by">Opened By:</label>
          <input type="text" v-model="request.Opened_by" required class="rounded-input" />
        </div>
        <div class="form-group">
          <label for="state">State:</label>
          <input type="text" v-model="request.State" readonly class="rounded-input" />
        </div>
        <div class="form-group">
          <label for="short_description">Short Description:</label>
          <input type="text" v-model="request.Short_description" required class="rounded-input" />
        </div>
        <div class="form-group">
          <label for="description">Description:</label>
          <textarea v-model="request.Description" class="rounded-textarea"></textarea>
        </div>
        <div class="form-group">
          <label for="assigned_to">Assigned To:</label>
          <input type="text" v-model="request.Assigned_to" class="rounded-input" />
        </div>
        <div class="form-group">
          <label for="assignment_group">Assignment Group:</label>
          <select v-model="request.Assignment_group" class="rounded-select">
            <option value="" disabled>Select Assignment Group</option>
            <option value="Cloud-Administrators-L1">Cloud-Administrators-L1</option>
            <option value="Cloud-Administrators-L2">Cloud-Administrators-L2</option>
            <option value="Cloud-Administrators-Tech Lead">Cloud-Administrators-Tech Lead</option>
          </select>
        </div>
        <div class="form-group">
          <label for="project">Project:</label>
          <input type="text" v-model="request.Project" class="rounded-input" />
        </div>
      </div>
      <button type="submit" class="blue-button">创建 Request</button>
    </form>

    <!-- 确认对话框 -->
    <ConfirmationDialog2
      v-if="showDialog"
      @confirm="createRequest"
      @cancel="showDialog = false"
    />
  </div>
</template>
  
<script>
import axios from 'axios';
import ConfirmationDialog2 from '../components/ConfirmationDialog2.vue'; // 导入对话框组件

export default {
  components: {
    ConfirmationDialog2 // 注册对话框组件
  },
  data() {
    return {
      request: {
        Item: '',
        Priority: '',
        Opened: '',
        Opened_by: '',
        State: 'Open', // 默认值
        Short_description: '',
        Description: '',
        Assigned_to: '',
        Assignment_group: '',
        Project: ''
      },
      showDialog: false // 控制对话框显示的状态
    };
  },
  mounted() {
    // 设置当前系统时间为 Opened 字段，并转换为东八区时间
    const now = new Date();
    now.setHours(now.getHours() + 8); // 加上8小时，转换为东八区时间
    const formattedDate = now.toISOString().slice(0, 16); // 格式化为 'YYYY-MM-DDTHH:MM'
    this.request.Opened = formattedDate;
  },
  methods: {
    showConfirmationDialog() {
      this.showDialog = true; // 显示确认对话框
    },
    async createRequest() {
      try {
        // 在提交前，将东八区时间转换为 UTC 时间
        const utcOpened = this.convertToUTC(this.request.Opened);
        const requestData = {
          ...this.request,
          Opened: utcOpened
        };

        const response = await axios.post('http://localhost:3000/api/requests', requestData);
        alert('Request 创建成功: ' + response.data.message);
        this.resetForm();
        this.showDialog = false; // 关闭对话框
      } catch (error) {
        console.error('创建 Request 失败:', error);
        alert('创建 Request 失败: ' + (error.response?.data?.message || error.message));
      }
    },
    resetForm() {
      this.request = {
        Item: '',
        Priority: '',
        Opened: '',
        Opened_by: '',
        State: 'Open', // 默认值
        Short_description: '',
        Description: '',
        Assigned_to: '',
        Assignment_group: '',
        Project: ''
      };
    },
    convertToUTC(dateString) {
      const date = new Date(dateString);
      date.setHours(date.getHours() + 8); // 加8小时
      return date.toISOString().slice(0, 16);
    }
  }
};
</script>
  
  <style scoped>
.container {
    background-color: white; /* 白色背景 */
    border-radius: 10px; /* 圆角 */
    padding: 20px; /* 内边距 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 16px; /* 列间距 */
}

.form-group {
  display: flex;
  flex-direction: column;
}

/* 输入框、下拉框和文本域的样式 */
.rounded-input,
.rounded-select,
.rounded-textarea {
  border-radius: 8px; /* 圆角 */
  border: 1px solid #ccc; /* 边框颜色 */
  padding: 10px; /* 内边距 */
  font-size: 14px; /* 字体大小 */
  width: 100%; /* 宽度占满父容器 */
}

.rounded-input:focus,
.rounded-select:focus,
.rounded-textarea:focus {
  outline: none; /* 移除默认轮廓 */
  border-color: #007bff; /* 焦点时边框颜色 */
}

/* 按钮样式 */
.blue-button {
  margin-top: 20px; /* 与表单的间距 */
  background-color: #007bff; /* 蓝色背景 */
  color: white; /* 白色文字 */
  border: none; /* 无边框 */
  border-radius: 8px; /* 圆角 */
  padding: 10px 20px; /* 内边距 */
  font-size: 16px; /* 字体大小 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
}

.blue-button:hover {
  background-color: #0056b3; /* 悬停时的深蓝色背景 */
}
</style>